<template>
  <div>
    <div class="file-header">
      <div class="breadcrumb">
        <span v-for="(e, i) in paths" :key="i">
          <el-button type="text" @click="goLevel(e, i)">{{ e.name }}</el-button>
          {{ `${i != paths.length - 1 ? '/' : ''}` }}
        </span>
      </div>
    </div>
    <div class="scroll-box">
      <el-table :data="tableData" v-if="listShow">
        <el-table-column prop="name" label="名称">
          <template slot-scope="{ row }">
          <span @dblclick="goPath($event, row)">
            <!-- {{ row.name }} -->
            <preview :row="row" :islook="true" style="height: 20px"/>
          </span>
            <!-- <span @click="preview(row)">{{ row.name }}</span> -->
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="文件大小" prop="size">
          <template slot-scope="{ row }">{{
            formatFileSize(row)
            }}</template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="修改时间" prop="modify_time" />
        <!-- <el-table-column label="操作" width="120px" align="center" header-align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="download(row)">下载</el-button>
            <el-button v-if="!hideHandle" type="text" @click="del(row)">删除</el-button>
          </template>
        </el-table-column> -->

      </el-table>
    </div>
    <div class="pagination-box" v-if="Pagedata.total > Pagedata.page_size">
      <el-pagination
        background
        class="pagination"
        layout="total, prev, pager, next, jumper"
        :page-size="Pagedata.page_size"
        :current-page.sync="Pagedata.current"
        @current-change="handleCurrentChange"
        :total="Pagedata.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  // getFileList
import { getS3FileList } from "@/api/file"
import preview from './modules/preview'
import { arrSplit } from '@/utils/tool'
  import { zipFormat, mediaFormat } from "@/utils/maps";
export default {
  name: "FileList",
  props: ['s3_access_id', 's3_path','biz_id'],
  data() {
    return{
      myInfo: {},
      tableData: [],
      Pagedata: {},
      paths: [],
      pageNum: 1,
      pageSize: 10,
        pathName:"根目录",
        listShow:false,
    }
  },
  watch: {

  },
  components: {
    preview
  },
  methods: {
    async initParam(relative_path) {
        console.log(relative_path)
      this.myInfo = await this.$myInfo(this)
      this.Pagedata = {
          relative_path:this.s3_path,
        s3_access_id: this.s3_access_id,
        s3_path:  this.s3_path
      }
      return 
    },
      handleClass({ dir, suffix }) {
          if (dir) return "dir";
          if (zipFormat[suffix]) return "zip";
          if (mediaFormat[suffix]) return mediaFormat[suffix]
          return "text";
      },
    paging(result) {
      console.log(result)
      console.log(arrSplit(result, this.pageSize))
    },
    async getData() {
      let res = await getS3FileList(this.Pagedata)
      // let res2 = await getFileList(this.Pagedata)
      // console.log(res2)
      this.paging(res.data)
      this.tableData = res.data
      if (this.tableData.length > 0 ){
          this.listShow = true;
      }
      // this.Pagedata.total = res.data.total
    },
      info() {
          this.getData()
      },
    goPath($event, { dir, name, path }) {
      $event.stopPropagation()
      if (!dir) return
      this.Pagedata.relative_path = path
      this.paths.push({
        name,
        relative_path: path
      })
      this.getData()
    },
    goLevel(e, i) {
      this.Pagedata.relative_path = e.relative_path
      this.paths.splice(i + 1)
      this.getData()
    },
    handleCurrentChange(val) {
      this.Pagedata.current = val + 1
      this.getData()
    },
    formatFileSize ({ size, dir }) {
      if (dir) {
        return '-'
      }
      if (size < 1024) {
        return size + "B";
      } else if (size < 1024 * 1024) {
        let temp = size / 1024;
        temp = temp.toFixed(2);
        return temp + "KB";
      } else if (size < 1024 * 1024 * 1024) {
        let temp = size / (1024 * 1024);
        temp = temp.toFixed(2); 
        return temp + "MB";
      } else {
        let temp = size / (1024 * 1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "GB";
      }
    },
  },
  async mounted() {
    await this.initParam(this.relative_path)
    this.getData()
      console.log("this.pathName:",this.pathName)
    let root = this.pathName ? this.pathName : '根目录'
    this.paths = [{
      name: root,
      relative_path: this.relative_path
    }]
  }
}
</script>

<!--
<style lang="less" scoped>
.file-header{
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  .breadcrumb{
    line-height: 40px;
  }
}
</style>-->
<style lang="less" scoped>
  .scroll-box {
    overflow: auto;
    max-height: 460px;

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.1);
    }

    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, .06);
    }
  }

  .file-header {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;

    .breadcrumb {
      line-height: 40px;
      padding-left: 20px;
    }
  }

  .switch {
    overflow: hidden;
    padding-right: 20px;

    a {
      float: left;
      width: 20px;
      height: 20px;
      margin-left: 14px;
      margin-top: 10px;
      background-color: #767676;
    }

    .btn-pic {
      mask: url(~@/assets/img/file-icon/btn-pic.svg);
      mask-size: 20px 20px;
    }

    .btn-lis {
      mask: url(~@/assets/img/file-icon/btn-lis.svg);
      mask-size: 20px 20px;
    }

    .acticv {
      background-color: #409EFF;
    }

    .add-btn {
      float: left;
    }
  }

  .large-icon {
    display: flex;
    flex-wrap: wrap;

    li {
      width: 80px;
      margin: 40px 40px 0;
    }

    .file-item {
      position: relative;
      width: 80px;
      height: 80px;

      .large-icon-preview {
        position: absolute;
        left: 0;
        top: 0;

        /deep/ .name-icon {
          width: 80px;
          height: 80px;
          opacity: 0;
        }
      }

      .file-icon {
        width: 80px;
        height: 80px;
      }
    }

    .name {
      padding-top: 8px;
      line-height: 24px;
      color: #3D3D3D;
      width: 80px;
      overflow: hidden;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .large-icon-add {
      position: relative;

      span {
        width: 80px;
        height: 80px;
        font-size: 22px;
        border-radius: 4px;
        display: block;
        line-height: 80px;
        text-align: center;
        border: 1px solid #DCDFE6;
      }

      .add-btn {
        width: 80px;
        height: 80px;
        position: absolute;
        left: 0;
        top: 0;

        /deep/ .add-button {
          width: 80px;
          height: 80px;
          opacity: 0;
        }
      }
    }
  }
</style>